<template>
	<page-wraper :safeAreaInsetBottom="false">
		<view class="cooperation-section">
			<!-- 合作标题 -->
			<view class="coop-header">
				<view class="coop-title">诚邀合作</view>
				<view class="coop-divider"></view>
			</view>

			<!-- 合作对象 -->
			<view class="target-partners">
				<text class="partner-title">我们期待与以下伙伴合作：</text>
				<view class="partner-list">
					<view class="partner-item">
						<text class="dot">•</text>
						<text>全美/加各类商家</text>
					</view>
					<view class="partner-item">
						<text class="dot">•</text>
						<text>学生组织</text>
					</view>
					<view class="partner-item">
						<text class="dot">•</text>
						<text>华人社区组织</text>
					</view>
				</view>
			</view>

			<!-- 联系方式 -->
			<view class="contact-info">
				<text class="contact-text">合作咨询请联系：</text>
				<view class="email-container" @click="copyEmail">
					<wd-icon name="mail" size="22px" class="email-icon"></wd-icon>
					<text class="email" style="margin-left: 5px;">joeson@ytad-logistics.com</text>
					<text class="copy-hint">(点击复制)</text>
				</view>
			</view>
		</view>
	</page-wraper>
</template>

<script lang="ts" setup>
	function copyEmail() {
		wx.setClipboardData({
			data: 'joeson@ytad-logistics.com',
			success: function() {
				wx.showToast({
					title: '邮箱已复制',
					icon: 'success',
					duration: 2000
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.page-wraper) {
		background: #f6f6f6;
	}

	.cooperation-section {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin: 20rpx;
	}

	.coop-header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.coop-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.coop-divider {
		width: 60rpx;
		height: 6rpx;
		background: #1aad19;
		margin: 20rpx auto;
		border-radius: 3rpx;
	}

	.target-partners {
		margin: 30rpx 0;
	}

	.partner-title {
		font-size: 30rpx;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.partner-list {
		padding: 20rpx 0;
	}

	.partner-item {
		display: flex;
		align-items: center;
		margin: 16rpx 0;
	}

	.dot {
		color: #1aad19;
		margin-right: 10rpx;
		font-weight: bold;
	}

	.contact-info {
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 2rpx solid #f5f5f5;
	}

	.contact-text {
		font-size: 30rpx;
		color: #666666;
		margin-bottom: 15rpx;
	}

	.email-container {
		display: flex;
		align-items: center;
		background: #f8f8f8;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-top: 15rpx;
	}

	.email-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.email {
		color: #1aad19;
		font-size: 28rpx;
	}

	.copy-hint {
		font-size: 24rpx;
		color: #999999;
		margin-left: 15rpx;
	}
</style>